<template>
    <div class="content">
        <el-table class="content-list" border :data="contents.list" style="width: 100%">
            <el-table-column label="首页图片" width="100">
                <template #default="scope">
                    <el-image
                        style="width: 50px; height: 50px"
                        :hide-on-click-modal="true"
                        :preview-teleported="true"
                        :preview-src-list="[scope.row.images[0] ? prefixUrl + scope.row.images[0].path:'']"
                        :src="
                            scope.row.images[0] ? prefixUrl + scope.row.images[0].path : ''
                        "
                        fit="contain"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="200"/>
            <el-table-column label="内容" width="200">
                <template #default="scope">
                    <el-text truncated>{{ scope.row.text }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="类别" width="100">
                <template #default="scope">
                    <el-text>{{ scope.row.type.name }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
                <template #default="scope">
                    <el-tag
                    v-if="scope.row.status.id == 1003"
                    type="info"
                    disable-transitions>已下线</el-tag>
                    <el-tag
                    v-else
                    type="success"
                    disable-transitions>正常</el-tag>
                    
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small"
                    :disabled="scope.row.index == 1"
                        @click="handleMove(scope.row.id,-1)"
                    >
                       <el-icon ><SortUp /></el-icon>上移
                    </el-button>
                    <el-button size="small"
                    :disabled="scope.row.index == contents.total"
                        @click="handleMove(scope.row.id,1)"
                    >
                        <el-icon ><SortDown /></el-icon>下移
                    </el-button>
                    
                </template>
            </el-table-column>
            
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            v-model:current-page="contents.pageNum"
            v-model:page-size="contents.pageSize"
            :total="contents.total"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<script setup>
import { ref ,defineEmits} from "vue";
import {  ElMessageBox } from "element-plus";
import {
    SortUp,
    SortDown
} from "@element-plus/icons-vue";
import { storeToRefs } from "pinia";
import { url,staticUrl } from "@/services";
// import { updateIndex } from "@/services/content";
import { useContentStore } from "@/stores/content";
import { moveElement } from "@/utils/util";
import { updateContentIndex } from "../../../services/content";
const contentStore = useContentStore();;
const {setUpdateDialogVisible,fetchContentById,fetchContentsByTypeId} = contentStore;
const {contents} = storeToRefs(contentStore);
const prefixUrl = ref(staticUrl);
// import { useStudentStore } from '../../stores/student';

// const props = defineProps(["data"]);
const emit = defineEmits(['refresh']);
function handleCurrentChange(val){
    // emit('show',{current:val});
    fetchContentsByTypeId({current:val});
    
}
async function handleMove(id,val) {
    // let newData = moveElement(contents.value.rows, srcIndex, srcIndex - 1);
    // await updateIndex(JSON.stringify(newData));
    await updateContentIndex(id,val);
    fetchContentsByTypeId({current:contents.value.pageNum});
    // emit("refresh");
}

</script>
<style>
.content {
    padding-bottom: 50px;
}
.content-list {
    /* margin-top: 25px; */
    margin-bottom: 15px;
}
</style>
